<template>
  <div class="container">
    <h1>新建报修</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>基础信息</span>
    <div class="body">
      <div class="input">
        <div class="input-left">
          <span>关联房屋</span>
        </div>
        <div class="input-right">
          <el-cascader
            v-model="connection_house"
            :options="options1"
            placeholder="请选择房屋"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>维修项目</span>
        </div>
        <div class="input-right">
          <el-cascader
            v-model="repair_project"
            :options="options2"
            :show-all-levels="false"
            placeholder="请选择维修项目"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>标题</span>
        </div>
        <div class="input-right">
          <el-input v-model="title" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>问题描述</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="description"
            type="textarea"
            :rows="5"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>手机号码</span>
        </div>
        <div class="input-right">
          <el-input v-model="phone" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>报修住户</span>
        </div>
        <div class="input-right">
          <el-input v-model="person" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>预约日期</span>
        </div>
        <div class="input-right">
          <el-date-picker v-model="date" placeholder="选择日期" />
        </div>
      </div>
      <div style="margin: 2rem 0 2rem 12rem">
        <el-button type="primary" @click="submitVehicle">提交</el-button>
        <el-button type="default" @click="to('tenement/repair')"
          >返回</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import to from "@/utils/to.js";
import axios from "axios"; // 引入 axios 用于发送 HTTP 请求
import { dayjs, ElMessage } from "element-plus"; // 引入 Element Plus 的消息提示
import { useRoute } from "vue-router";

const route = useRoute();
const id = route.query.id;

const connection_house = ref([]);
const repair_project = ref([]);
const title = ref("");
const description = ref("");
const phone = ref("");
const person = ref("");
const date = ref("");

const options1 = ref([]);

const options2 = [
  {
    value: "家居",
    label: "家居",
    children: [
      { value: "冰箱", label: "冰箱" },
      { value: "空调", label: "空调" },
      { value: "洗衣机", label: "洗衣机" },
    ],
  },
  {
    value: "家具",
    label: "家具",
    children: [
      { value: "定制柜", label: "定制柜" },
      { value: "抽油烟机", label: "抽油烟机" },
    ],
  },
];

const getFloor = () => {
  const config = {
    url: "http://localhost:8080/floor/get",
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      options1.value = data.data.data.map((item) => ({
        value: item.name,
        label: item.name,
        children: Array.from({ length: item.unitNum }, (_, index) => ({
          label: `${index + 1}单元`,
          value: `${index + 1}单元`,
          children: Array.from({ length: 5 }, (_, j) => ({
            label: `${index + 1}0${j + 1}`,
            value: `${index + 1}0${j + 1}`,
          })),
        })),
      }));
    })
    .catch((error) => {
      console.log(error);
    });
};

const submitVehicle = () => {
  if (connection_house.value === null) {
    ElMessage({
      message: "请选择关联房屋",
      type: "warning",
    });
    return;
  } else if (repair_project.value === null) {
    ElMessage({
      message: "请选择维修项目",
      type: "warning",
    });
    return;
  } else if (date.value === "") {
    ElMessage({
      message: "请选择预约日期",
      type: "warning",
    });
    return;
  }

  let config = {};

  if (id === undefined || id === "") {
    config = {
      url: "http://localhost:8080/property/repair/add-repair",
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        home: Object.values(connection_house.value).join("/"),
        person: person.value,
        project: Object.values(repair_project.value).join("/"),
        title: title.value,
        description: description.value,
        phone: phone.value,
        appointDate: dayjs(date.value).format("YYYY-MM-DD"),
      },
    };
  } else {
    config = {
      url: "http://localhost:8080/property/repair/modify-repair",
      method: "PUT",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        id: id,
        home: Object.values(connection_house.value).join("/"),
        person: person.value,
        project: Object.values(repair_project.value).join("/"),
        title: title.value,
        description: description.value,
        phone: phone.value,
        appointDate: dayjs(date.value).format("YYYY-MM-DD"),
      },
    };
  }

  const response = axios(config);
  response
    .then((data) => {
      if (data.data.code === 1) {
        ElMessage({
          message: "操作成功",
          type: "success",
        });
        setTimeout(() => {
          to("tenement/repair");
        }, 2000);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const get = () => {
  const config = {
    url: `http://localhost:8080/property/repair/get/${id}`,
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      connection_house.value = data.data.data.home.split("/");
      repair_project.value = data.data.data.project.split("/");
      title.value = data.data.data.title;
      description.value = data.data.data.description;
      phone.value = data.data.data.phone;
      person.value = data.data.data.person;
      date.value = data.data.data.appointDate;
    })
    .catch((error) => {
      console.log(error);
    });
};

onMounted(() => {
  get();
  getFloor();
});
</script>

<style scoped>
.container {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin: 1rem 2rem 1rem 0;
  line-height: 24px;
  width: 100px;
  text-align: right;
}

.body {
  display: grid;
  justify-content: center;
  align-items: center;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.input-right {
  width: 300px;
}
</style>
